<template>
  <div :class="classObj">
    <div class="app">
      <div class="classification_oneBox">
        <div class="classification_one">
          <div class="classification_one_box" v-for="(item,index) in categoryOne" @click="categoryOneClick(item.id)">
            <span class="classification_one_title">{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div style="display: flex;flex-direction: column;position: absolute;left: 66px;top: 0;right: 0">
        <div style="width: 100%;height: 34px;" v-show="categoryTwo.length>0"></div>
        <div class="classification_twoBox" v-show="categoryTwo.length>0">
          <div class="classification_two" >
            <div class="classification_two_box" v-for="item in categoryTwo" @click="categoryTwoClick(item.id)">
              <span class="classification_two_title">{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div :class="[categoryTwo.length>0?'classification_content':'classification_contentTwo']" v-infinite-scroll="loadProduct"
          infinite-scroll-disabled="disabled">
          <div v-for="item in productData" @click="productClick(item)" style="height: 80px;">
            <product class="classification_content_product" :product="item"></product>
          </div>
          <p class="loadIng" v-if="loading">加载中...</p>
          <p class="loadIng" v-if="noMore" v-show="productData.length>20">没有更多了</p>
        </div>
        <div style="display: flex;flex-direction: row;">
          <div class="bottom_box">
            <div class="classification_content_code">
              <div style="display: flex;align-items: center">
                <span style="font-size: 14px">{{inputType=='code'?'条码':inputType=='price'?'调价':inputType=='memo'?'备注':'会员'}}：</span>
                <el-input @keyup.native="show" @blur="blurClick" size="mini" ref="input" v-focus class="classification_content_input"
                  v-model="inputNumber" @change="inputClick"></el-input>
              </div>
            </div>
            <div style="display: flex;justify-content: flex-end;padding-right: 4px">
              <div class="classification_content_infoPrice">
                <span class="classification_content_info_name">{{productName}}</span>
                <span style="font-size: 16px;font-weight: bold;text-align: center;">单价：{{productPrice}}元</span>
                <span style="font-size:14px;text-align: right;">库存：{{productStock}}</span>

              </div>
              <div class="classification_content_infoTwo">
                <el-button class="infoBotton" size="mini" type="danger" plain @click='codeClick'>条码(F5)</el-button>
                <el-button class="infoBotton" size="mini" type="danger" plain @click='memberClick'>会员(F6)</el-button>
                <el-button class="infoBotton" type="warning" size="mini" plain @click="clearClick">清屏(Ins)</el-button>
                <el-button class="infoBotton" size="mini" type="primary" plain @click="depositClick">挂单(PgDn)</el-button>
                <el-button class="infoBotton" size="mini" type="primary" plain @click="takeClick">取单(PgUp)</el-button>
                <el-button class="infoBotton" size="mini" type="primary" plain @click='priceClick'>调价(F4)</el-button>
                <el-button class="infoBotton" size="mini" type="primary" plain @click="delClick">删除(F9)</el-button>
                <el-button class="infoBotton" size="mini" type="primary" plain @click="memoClick">备注(F3)</el-button>
                <el-button class="infoBotton" size="mini">隐藏</el-button>
                <el-button class="infoBottonTwo" size="mini" type="primary" plain @click="settlementClick">结账(+)</el-button>
                <el-button class="infoBotton" size="mini" type="primary" plain @click="cashboxClick">开钱箱</el-button>
                <el-button class="infoBotton" size="mini" type="primary" plain @click="smallTicketClick">补打小票</el-button>
              </div>
              <div class="keyboard_box">
                <div class="keyboard_box_item" v-for="(item,index) in keyData" @click="keyboardClick(item)">
                  <span class="keyboard_box_item_title">{{item}}</span>
                </div>
                <div class="keyboard_box_itemTwo" @click="keyboardClick('取消')">
                  <span class="keyboard_box_itemTwoTitle">X</span>
                </div>
                <div class="keyboard_box_itemThree" @click="keyboardClick('确定')">
                  <span class="keyboard_box_itemTwoTitle">确定</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import product from '@/views/cashier/components/product'
  import {
    findBySn
  } from "@/api/product";
  import {
    list as categoryList
  } from '@/api/productCategory'
  import {
    list
  } from '@/api/product'
  import Pagination from '@/components/Pagination'
  import {
    list as memberList
  } from '@/api/member'
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        productData: [],
        pageNum: 0,
        pageSize: 50,
        total: 0,
        loading: false,
        noMore: false,
        categoryOne: [],
        categoryOneId: '',
        categoryTwo: [],
        inputData: '',
        inputType: 'code',
        memberInputData: '',
        productName: '',
        productStock: 0,
        productPrice: 0,
        inputNumber: '',
        tableIndex: 0,
        tableIndexTwo: null,
        keyData: [
          '7', '8', '9', 'C', '4', '5', '6', '空', '1', '2', '3', '空', '/', '0', '.', '空'
        ],
        priceData: '',
        memoTitle: '',
        productSn:''
      }
    },
    props: [
      'tableData'
    ],
    components: {
      product,
      Pagination
    },
    created() {
      this.loadProduct()
      this.loadCategory()
    },
    computed: {
      disabled() {
        return this.loading || this.noMore
      },
      ...mapState({
        sidebar: state => state.app.sidebar,
        device: state => state.app.device,
      }),
      classObj() {
        if (this.sidebar.opened == true && this.device == 'desktop') {
          return 'hideSidebarOne'
        }
        return {
          mobile: this.device === 'mobile'
        }
      }
    },
    directives: {
      focus: {
        // 指令的定义
        inserted: function(el) {
          el.children[0].focus();
        }
      }
    },
    methods: {
      loadProduct() {
        var _this = this
        this.loading = true
        this.pageNum += 1
        let params = new URLSearchParams()
        params.append('pageNum', _this.pageNum)
        params.append('pageSize', _this.pageSize)
        params.append('productCategory', _this.categoryOneId)
        params.append('sn', _this.productSn)
        list(params)
          .then(response => {
            console.log(response)
            response.data.data.forEach(function(item) {
              _this.productData.push(item)
            })
            _this.noMore = response.data.data.length < 20
            _this.loading = false
          })
          .catch(error => {
            console.log('error!!')
          })
      },
      loadCategory() {
        var _this = this
        let params = new URLSearchParams()
        categoryList(params)
          .then(response => {
            console.log(response)
            _this.categoryOne = response.data
          })
          .catch(error => {
            console.log('error!!')
          })
      },
      loadCategoryTwo() {
        var _this = this
        let params = new URLSearchParams()
        params.append('id', _this.categoryOneId)
        categoryList(params)
          .then(response => {
            console.log(response)
            _this.categoryTwo = response.data
          })
          .catch(error => {
            console.log('error!!')
          })
      },
      categoryOneClick(id) {
        this.categoryOneId = id
        this.pageNum = 0
        this.productData = []
        this.productSn = ''
        this.loadProduct()
        this.loadCategoryTwo()
      },
      categoryTwoClick(id) {
        this.categoryOneId = id
        this.pageNum = 0
        this.productSn = ''
        this.productData = []
        this.loadProduct()
      },
      productClick(item) {
        console.log(item)
        this.productName = item.name,
          this.productStock = item.stock,
          this.productPrice = item.price
        this.$emit('productClick', item)
      },
      memberClick() {
        this.inputType = 'member'
        this.inputNumber = ''
      },
      codeClick() {
        this.inputType = 'code'
        this.inputNumber = ''
      },
      show(data) {
        // console.log(data)
        var _this = this
        if (data.key == 'F4') {
          this.priceClick()
        } else if (data.key == 'F3') {
          this.memoClick()
        } else if (data.key == 'F5') {
          this.codeClick()
        } else if (data.key == 'F6') {
          this.memberClick()
        } else if (data.key == 'F9') {
          _this.delClick()
        } else if (data.key == 'Insert') {
          this.clearClick()
        } else if (data.key == '+') {
          this.settlementClick()
        } else if (data.key == 'PageUp') {
          this.depositClick()
        } else if (data.key == 'PageDown') {
          this.takeClick()
        } else if (data.key == 'Enter') {
          if (this.inputType == 'member') {
            this.loadMember()
          } else if (this.inputType == 'code') {
            _this.codeNumberClick()
          } else if (_this.inputType == 'price') {
            _this.priceNumberClick()
          } else if (_this.inputType == 'memo') {
            _this.memoTitleClick()
          }
        } else if (data.key == 'ArrowUp') {
          _this.ArrowUpClick()
        } else if (data.key == 'ArrowDown') {
          _this.ArrowDownClick()
        }
      },
      blurClick() {
        console.log('失去焦点')
        this.$refs.input.focus()
      },
      clearClick() {
        this.$emit('clearClick')
      },
      loadMember() {
        var _this = this
        console.log(this.inputNumber)
        var regNumber = /\d+/; //验证0-9的任意数字最少出现1次。
        var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次
        if ((regNumber.test(_this.inputNumber) && regString.test(_this.inputNumber)) || regString.test(_this.inputNumber)) {
          _this.inputNumber = ''
        } else {
          if (escape(_this.inputNumber).indexOf("%u") < 0) {
            const params = new URLSearchParams()
            params.append('phone', this.inputNumber)
            memberList(params).then(response => {
              console.log(response)
              if (response.data.data.length) {
                _this.$emit('memberClick', response.data.data[0])
                _this.inputNumber = ''
              } else {
                alert('请输入正确的会员号！！！')
              }
            }).catch(error => {
              console.log('error!!')
            })
          } else {
            _this.inputNumber = ''
          }
          _this.inputNumber = ''
        }
      },
      inputClick(data) {
        // var _this = this
        // if (_this.inputType == 'code') {
        //   _this.inputData = _this.inputNumber
        // } else if (_this.inputType == 'price') {
        //   _this.priceData =  _this.inputNumber
        // } else {
        //   _this.memberInputData =  _this.inputNumber
        // }
      },
      tableIndexClick(data) {
        console.log('右边index')
        console.log(data)
        this.tableIndex = data
        this.tableIndexTwo = this.tableIndex
        this.productName = this.tableData[data].name,
          this.productStock = this.tableData[data].stock,
          this.productPrice = this.tableData[data].price
      },
      keyboardClick(item) {
        console.log(item)
        if (item == 'C') {
          this.inputNumber = ''
        } else if (item == '取消') {
          console.log('1111')
          this.inputNumber = this.inputNumber.substring(0, this.inputNumber.length - 1)
        } else if (item == '确定') {
          if (this.inputType == 'member') {
            this.loadMember()
          } else if (this.inputType == 'code') {
            _this.codeNumberClick()
          } else if (_this.inputType == 'price') {
            _this.priceNumberClick()
          } else if (_this.inputType == 'memo') {
            _this.memoTitleClick()
          }
        } else {
          this.inputNumber = this.inputNumber + item
        }
      },
      priceClick() {
        this.inputType = 'price',
          this.inputNumber = ''
      },
      priceNumberClick() {
        var _this = this
        console.log(_this.inputNumber)
        var regNumber = /\d+/; //验证0-9的任意数字最少出现1次。
        var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次
        if (_this.inputNumber.length > 0 && this.tableData.length != 0) {
          if ((regNumber.test(_this.inputNumber) && regString.test(_this.inputNumber)) || regString.test(_this.inputNumber)) {
            _this.inputNumber = ''
            console.log('jinlai1')
          } else {
            console.log('jinlai2')
            if (escape(_this.inputNumber).indexOf("%u") < 0) {
              var data = {
                tableIndex: _this.tableIndex,
                price: _this.inputNumber,
              }
              _this.$emit('priceClick', data)
              _this.inputNumber = ''
            } else {
              _this.inputNumber = ''
            }
          }
        } else {
          _this.inputNumber = ''
        }
      },
      codeNumberClick() {
        var _this = this
        console.log(_this.inputNumber)
        var regNumber = /\d+/; //验证0-9的任意数字最少出现1次。
        var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次
        if (_this.inputNumber.length <= 4 && _this.inputNumber.length > 0) {
          if ((regNumber.test(_this.inputNumber) && regString.test(_this.inputNumber)) || regString.test(_this.inputNumber)) {
            _this.inputNumber = ''
          } else {
            if (escape(_this.inputNumber).indexOf("%u") < 0) {
              if (_this.tableIndexTwo == null && _this.tableData.length != 0) {
                _this.tableIndex = 0
                var data = {
                  tableIndex: _this.tableIndex,
                  quantity: _this.inputNumber,
                }
                _this.$emit('quantityClick', data)
                _this.inputNumber = ''
              } else if (_this.tableData.length != 0) {
                var data = {
                  tableIndex: _this.tableIndex,
                  quantity: _this.inputNumber,
                }
                _this.$emit('quantityClick', data)
                _this.inputNumber = ''
              } else {
                _this.inputNumber = ''
              }
            } else {
              _this.inputNumber = ''
            }
          }
        } else if (_this.inputNumber.length > 4) {
          if ((regNumber.test(_this.inputNumber) && regString.test(_this.inputNumber)) || regString.test(_this.inputNumber)) {
            if (escape(_this.inputNumber).indexOf("%u") < 0) {
              _this.productSn = _this.inputNumber
              _this.loadProduct()
            }
            _this.inputNumber = ''
          } else {
            if (escape(_this.inputNumber).indexOf("%u") < 0) {
              // alert('哦豁，你输入数子条码')
              _this.snClick(_this.inputNumber)
              _this.inputNumber = ''
            } else {
              _this.inputNumber = ''
            }
            _this.inputNumber = ''
          }
        }
      },
      ArrowUpClick() {
        var _this = this
        console.log(this.tableIndex)
        if (this.tableIndex > 0 && this.tableData.length != 0) {
          this.tableIndex -= 1
          this.tableIndexTwo = this.tableIndex
          this.productName = this.tableData[this.tableIndex].name,
            this.productStock = this.tableData[this.tableIndex].stock,
            this.productPrice = this.tableData[this.tableIndex].price
          this.$emit('tableIndexTwoClick', this.tableIndex)
        } else if (this.tableIndex == 0 && this.tableData.length != 0) {
          this.tableIndex = this.tableData.length - 1
          this.tableIndexTwo = this.tableIndex
          this.$emit('tableIndexTwoClick', this.tableIndex)
        }
      },
      ArrowDownClick() {
        var _this = this
        if (this.tableIndexTwo == null && this.tableData.length != 0) {
          this.tableIndex = 0
          this.tableIndexTwo = this.tableIndex
          this.$emit('tableIndexTwoClick', this.tableIndex)
        } else {
          if (this.tableIndex < this.tableData.length - 1 && this.tableData.length != 0) {
            this.tableIndex += 1
            this.tableIndexTwo = this.tableIndex
            this.productName = this.tableData[this.tableIndex - 1].name,
              this.productStock = this.tableData[this.tableIndex - 1].stock,
              this.productPrice = this.tableData[this.tableIndex - 1].price
            this.$emit('tableIndexTwoClick', this.tableIndex)
          } else if (this.tableIndex >= this.tableData.length - 1 && this.tableData.length != 0) {
            this.tableIndex = 0
            this.tableIndexTwo = this.tableIndex
            this.$emit('tableIndexTwoClick', this.tableIndex)
          }
        }
      },
      delClick() {
        var _this = this
        if (_this.tableData.length != 0) {
          this.$emit('delClick', _this.tableIndex)
        }
      },
      memoClick() {
        var _this = this
        this.inputType = 'memo',
          this.inputNumber = ''
      },
      memoTitleClick() {
        this.memoTitle = this.inputNumber
        console.log(this.memoTitle)
        this.inputNumber = ''
        this.$emit('memoClick', this.memoTitle)
      },
      settlementClick() {
        this.$emit('settlementClick')
      },
      cashboxClick() {
        alert('哦豁，你开启钱箱了')
      },
      smallTicketClick() {
        // alert('哦豁，你打印了小票')
        this.$emit('smallTicketClick')
      },
      depositClick() {
        this.$emit('depositClick')
      },
      takeClick() {
        this.$emit('takeClick')
      },
      clearClickTwo() {
        this.tableIndexTwo = null
        this.tableIndex = 0
        this.productName = '',
          this.productStock = '',
          this.productPrice = ''
      },
      snClick(data) {
        let params = new URLSearchParams();
        params.append('sn', data);
        findBySn(params).then(response => {
          console.log(response)
          if (response.data.products.length > 0) {
            this.productName = response.data.products[0].name,
              this.productStock = response.data.products[0].stock,
              this.productPrice = response.data.products[0].price
            this.$emit('productClick', response.data.products[0])
          }
        }).catch(error => {
          console.log('error!!')
        });
      }
    }
  }
</script>

<style scoped>
  .app {
    height: 100%;
    display: flex;
    position: relative;
    flex-grow: 1;
    width: calc(100vw - 450px);
  }


  .hideSidebarOne .app {
    height: 100%;
    display: flex;
    position: relative;
    flex-grow: 1;
    width: calc(100vw - 560px);
  }

  .mobile .app {
    height: 100%;
    display: flex;
    position: relative;
    flex-grow: 1;
    width: calc(100vw - 350px);
  }

  .bottom_box {
    width: 100%;
  }

  /* .mobile .bottom_box {
    width: calc(100% - 253px);
  } */

  .classification_content_input {
    width: 200px;
    height: 4vh;
  }

  /deep/.el-input__inner {
    height: 4vh;
  }

  /*  .mobile .classification_content_input {
    width: 90px;
  } */

  .classification_content_info_name {
    font-size: 16px;
    /* margin-right: 10px; */
    /* width: 220px; */
    display: block;
    /* flex-grow: 1; */
    width: 16vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* .mobile .classification_content_info_name {
    font-size: 16px;
    margin-right: 10px;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } */

  .infoBotton {
    margin-left: 3px !important;
    width: 86px;
    height: 26px;
    margin-bottom: 3px;
    font-size: 12px;
  }

  /* .mobile .infoBotton {
    margin-left: 3px !important;
    width: 86px;
    height: 30px;
    margin-bottom: 3px
  } */

  .infoBottonTwo {
    margin-left: 0 !important;
    position: absolute;
    right: 7px;
    top: 64px;
    width: 86px;
    height: 55px;
    font-size: 12px
  }

  /* .mobile .infoBottonTwo {
    margin-left: 0 !important;
    position: absolute;
    right: 7px;
    top: 72px;
    width: 86px;
    height: 63px;
  }
 */
  .classification_content_infoTwo {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: relative;
    /* height: 130px; */
    width: 280px;
    height: 125px;
  }

  /* .mobile .classification_content_infoTwo {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: relative;
    width: 280px;
  }
 */
  .classification_one {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 82px;
    overflow: auto;
    height: calc(94vh - 85px);
  }

  .classification_oneBox{
    width: 66px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .classification_one_box {
    border-bottom: 1px solid #dfe6ec;
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    width: 68px;
  }

  .classification_one_title {
    font-size: 12px;
    height: 43px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 64px;
  }

  .classification_two_title {
    font-size: 12px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .classification_two {
    display: flex;
    align-items: flex-start;
    height: 49px;
    /*width: 100vw;*/
    border-bottom: 1px solid #dfe6ec;
    overflow: auto;
    white-space: nowrap;
    background-color: white;
  }

  .classification_twoBox{
    height: 32px;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid #dfe6ec;
  }

  .classification_two_box {
    display: flex;
    align-items: center;
/*    padding-top: 16px;
    padding-bottom: 13px; */
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border-left: 1px solid #dfe6ec;
  }

  .classification_content {
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    height: calc(88vh - 244px);
    overflow: auto;
    padding-left: 5px;
    border-bottom: 1px solid #dfe6ec;
    align-content: flex-start;
  }

  .classification_contentTwo {
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    height: calc(88vh - 210px);
    overflow: auto;
    padding-left: 5px;
    border-bottom: 1px solid #dfe6ec;
    align-content: flex-start;
  }

  .classification_content_product {
    margin: 5px;
  }

  .classification_content_code {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: 6vh;
    box-sizing: border-box;
    border-bottom: 1px solid #dfe6ec;
    /* padding-right: 115px; */
  }

  .classification_content_info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    height: 6vh;
    box-sizing: border-box;
    border-bottom: 1px solid #dfe6ec;
  }

  .classification_content_pagenumber {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    justify-content: center;
    border-bottom: 1px solid #dfe6ec;
  }

  .loadIng {
    width: 800px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /deep/.el-input__inner {
    padding: 0 5px;
  }


  .keyboard_box {
    width: 124px;
    height: 124px;
    border-left: 1px solid #dfe6ec;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 3px;
    padding-bottom: 4px;
    position: relative;
    padding-left: 3px;
  }

  .keyboard_box_item {
    width: 28px;
    height: 28px;
    background-color: #d3d4d6;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: 1px; */
    margin: 1px;
    border-radius: 5px;
  }

  .keyboard_box_item:active {
    background-color: #d3d4d6;
    opacity: 0.4;
  }

  .keyboard_box_itemTwo {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1px;
    top: 34px;
    color: #409eff;
    background-color: rgba(64, 158, 255, 1);
    border-radius: 5px;
  }

  .keyboard_box_itemTwo:active {
    background-color: #a0cfff;
  }

  .keyboard_box_itemTwoTitle {
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  .keyboard_box_itemThree {
    width: 28px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1px;
    top: 64px;
    color: #409eff;
    background-color: rgba(64, 158, 255, 1);
    border-radius: 5px;
  }

  .keyboard_box_itemThree:active {
    background-color: #a0cfff;
  }

  .keyboard_box_item_title {
    font-size: 16px;
    font-weight: bold;
    color: black;
  }

  .classification_content_infoPrice {
    flex-grow: 1;
    height: 125px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-between;
    padding: 5px;
    box-sizing: border-box;
  }
</style>
